<template>
  <div class="root">
    <el-tree :data="data" :default-checked-keys="[pid]" :load="loadNode" :props="defaultProps" check-strictly
             class="depttree" lazy @node-click="chg"></el-tree>
    <span class="current">{{ info }}：{{ currentDept.name || '公司' }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pid: "1",
      deptname: "",
      user: {}, //登录用户信息
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name',
        isLeaf: 'isLeaf'
      },
      currentDept: {}
    }
  },
  created() {
    this.user = this.$session.getUser()
  },
  props: {
    info: {
      type: String,
      default: '当前上级部门'
    }
  },
  methods: {
    init(parentDept) {
      this.currentDept = parentDept
      console.log(this.currentDept)
    },
    chg(data) {
      this.currentDept = data
      this.$emit("change", this.currentDept)
    },
    loadNode(node, resolve) {
      this.pid = node.data.id || ''
      let params = {
        "pid": this.pid,
        "euid": this.user.euid
      };
      this.$api.queryTree(params)
        .then(res => {
          //判断接口数据是否正常
          if (res.code === 200) {
            resolve(res.data);
          }
        })
    },
  }
}
</script>

<style scoped>
.root {
  width: 60%;
  border: #ddd solid 1px;
  border-radius: 5px;
  margin-left: 20px;
}

.depttree {
  margin: 10px;
}

.current {
  color: #999;
  margin-left: 20px;
}
</style>

